
.wrapper-container {
  code {
    font-family: 'source-code-pro', Menlo, 'Courier New', Consolas, monospace;
  }

  pre {
    overflow: initial;
  }

  .button-demo {
    .button {
      margin: 8px;
    }
  }

  background: #fff;
  position: relative;
  padding: 40px 0 70px;
  display: flex;
  overflow: auto;
  zoom: 1;

  //侧边栏
  .menu-container {
    min-width: 280px;
    max-width: 280px;
    border-right: 1px solid #e8e8e8;
    margin-right: 30px;
    position: fixed;
    border-right: none;

    .menu-list {
      padding: 0;
      margin: 0;
      overflow: hidden;
      max-height: calc(100vh - 280px);
      overflow-x: hidden;
      overflow-y: auto;
    }

    .menu-item {
      font-size: 14px;
      text-overflow: ellipsis;
      white-space: nowrap;
      height: 40px;
      line-height: 40px;
    }

    a {
      text-decoration: none;
      color: #333;
      padding: 0 40px;
      display: block;

      &:hover {
        color: #20a0ff;
      }
    }
    .br-accordion__panel__content {
      padding: 10px 0;
    }
    .component-classfify-wrapper {
       margin-bottom: 10px;
    }
    .component-type {
      padding-left: 20px;
      line-height: 36px;
    }
    .component-type {
      color: #888;
    }

    .menu-item.active {
      background-color: #f3f3f3;
      border-right: 2px solid #2d8cf0;

      a {
        color: #20a0ff;
      }
    }
  }
  //页面
  .main-container {
    margin-left: 320px;
    width: 60%;
    vertical-align: top;

    p {
      margin: 10px 0;
      font-size: 14px;
    }

    ul.docs-list {
      list-style-type: circle;
      font-size: 14px;
      color: #333;
      margin-left: 20px;

      li {
        margin-bottom: 6px;
      }
    }

    table.grid {
      border-collapse: collapse;
      width: 100%;
      background-color: #fff;
      color: #5e6d82;
      font-size: 14px;
      margin-bottom: 45px;
      line-height: 1.5em;

      strong {
        font-weight: normal;
      }

      th {
        text-align: left;
        border-top: 1px solid #eaeefb;
        background-color: #EFF2F7;
        white-space: nowrap;
      }

      td, th {
        border: 1px solid #eaeefb;
        padding: 10px;
        max-width: 250px;
      }

      th:first-child, td:first-child {
        padding-left: 10px;
      }
    }
  }

  /*
  * bricks 文档
  * 新增：移动端适配样式
  */
  @media screen and (max-width: 768px){
    .menu-container{
      min-width: 240px;
      max-width: 240px;
      transform: translateX(-100%);
      transition: transform .5s;
      margin-right: 0;
      z-index: 100;
      background: #fff;
    }
    .menu-translatex {
      transform: translateX(0%);
      transition: transform .5s
    }
    .main-container {
      margin-left: 0;
      width: 100%;
      box-sizing: border-box;
      h1,h2,h3,h4,h5,h6 {
        padding: 0 5px;
      }
    }
  }
}
@media screen and (max-width: 768px){
  .header-container {
    position: fixed;
    width: 100%;
    .letter {
      font-size: 24px;
    }
  }
  // 给menu-container增加一层透明膜层
  .menu-mask {
    width: 100%;
    height: 100%;
    background: #000;
    opacity: .3;
    display: block;
    position: absolute;
    z-index: 99;
    top: 0;
    left: 0;
  }
  .wrapper-container {
    padding: 70px 0 0 0;
  }
  .menu-handle {
    position: fixed;
    top: 13px;
    left: 0;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 11;
    text-align: center;
    line-height: 40px;
    font-size: 16px;
    display: -ms-flexbox;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -ms-flex-pack: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -ms-flex-align: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    background: #fff;
    // -webkit-box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
    // box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
    // border-radius: 0 4px 4px 0;
    .menu-handle-icon {
      width: 14px;
      height: 2px;
      background: #333;
      position: relative;
      -webkit-transition: background 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
      transition: background 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
    }
    .menu-handle-icon::before, .menu-handle-icon::after {
      content: '';
      display: block;
      position: absolute;
      background: #333;
      width: 100%;
      height: 2px;
      -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
      transition: -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
      transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
      transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86), -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
    }
    .menu-handle-icon::before {
      top: -5px;
    }
    .menu-handle-icon::after {
      top: 5px;
    }
  }
  .menu-handle-icon-s::before {
    -webkit-transform: translateY(5px) rotate(45deg);
    -ms-transform: translateY(5px) rotate(45deg);
    transform: translateY(5px) rotate(45deg);
  }
  .menu-handle-icon-s::after {
    -webkit-transform: translateY(-5px) rotate(-45deg);
    -ms-transform: translateY(-5px) rotate(-45deg);
    transform: translateY(-5px) rotate(-45deg)
  }
}
